import React from "react";
import {HashRouter, Route, Redirect, Switch} from "react-router-dom";
import Film from "../views/Film";
import Cinema from "../views/Cinema";
import Center from "../views/Center";
import NotFound from "../views/NotFound";
import Detail from "../views/Detail";
import Login from "../views/Login";
import City from "../views/City";
import Search from "../views/Search";

function isAuth() {
    return localStorage.getItem("token");
}

export default function IndexRouter(props) {
    return <HashRouter>
        {/*Switch可以让匹配到路径后马上返回 不再往下匹配*/}
        <Switch>
            <Route path="/login" component={Login}/>
            <Route path="/film" component={Film}/>
            <Route path="/cinema" component={Cinema} exact/>
            <Route path="/cinema/search" component={Search}/>
            <Route path="/city" component={City}/>
            {/*模拟未登录场景 实现简单的路由守卫*/}
            <Route path="/center" render={() => isAuth() ? <Center/> : <Redirect to={'/login'} />} />
            {/*动态路由传参*/}
            <Route path="/detail/:filmId" component={Detail}/>
            {/*重定向到film 默认模糊匹配  exact表示精确匹配 必须得加 不然不存在的路径也会重定向到film*/}
            <Redirect from="/" to="/film" exact />
            <Route component={NotFound}/>
        </Switch>
        {/*插槽的方式引入 这里引入了Tabbar组件 即每个页面都有这个组件*/}
        {
            props.children
        }
    </HashRouter>
}